<template>
  <div class="fixed-box">
    <!-- 具名插槽在组件调用的时候需要同#name指定插入的内容 -->
    <slot name="fixed">
      <!-- 具名插槽的使用： <template #fixed> 插入的内容</template> -->
    </slot></div
  >
  <div class="box">
    <div> 左 </div>
    <div>
      <!-- 不写名称的slot是默认插槽
      插槽的作用是调用组件的地方编写要插入到组件相应位置的内容
      -->
      <slot></slot>
      <el-button @click="myclick">点击发生事件</el-button>
    </div>
    <div>右</div>
  </div>
  <div>{{ myprop }}</div>
</template>

<script setup>
import { ref } from 'vue';

//给组件定义属性
defineProps(['myprop']);

//给组件定义事件
const emit = defineEmits(['myevent']);
const myclick = () => {
  console.log('组件点击');
  //广播事件
  //第一个参数是事件名称，第二个参数是传递的参数
  //在父组件中可以通过v-on监听事件
  emit('myevent', '事件的参数');
};
</script>

<style scoped>
.box {
  display: flex;
  justify-content: space-between;
}
.fixed-box {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
}
</style>
